<template>
  <div style="display:flex;justify-content: space-between;align-items: center;">
    <div>
      <a-avatar
        class="avatar"
        shape="square"
        size="large"
        :style="{ backgroundColor: '#ffbf00', verticalAlign: 'middle' }"
        >族</a-avatar
      >
      <span style="vertical-align: middle;display:inline-block;padding:0 10px;font-size: 20px;font-weight: 700;"
        >族库管理平台</span
      >
    </div>
    <div>
      <slot name="search"></slot>
    </div>
    <div>
      <a-button type="text" @click="jump">后台管理</a-button>
      <span class="action" style="display:inline-block;padding:0 10px;">
        <a-avatar class="avatar" size="small" :src="getAvatar()" />
        <span>欢迎您，{{ nickname() }}</span>
      </span>
    </div>
  </div>
</template>

<script>
import { getFileAccessHttpUrl } from '@/api/manage'
import { mapGetters } from 'vuex'
export default {
  name: 'FamilyHeader',
  data() {
    return {
      description: '族管理页面的头部'
    }
  },
  methods: {
    ...mapGetters(['nickname', 'avatar', 'userInfo']),
    getAvatar() {
      return getFileAccessHttpUrl(this.avatar())
    },
    jump() {
      this.$router.push({ path: '/test/sys/HbBrandList' }).catch(() => {
        console.log('登录跳转首页出错,这个错误从哪里来的')
      })
    }
  }
}
</script>

<style></style>
